<template>
  <el-card class="order-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-input
            style="width: 220px; margin-right: 10px"
            placeholder="订单号"
            v-model="params.orderno"
            @change="query"
            clearable
          />
          <el-button-group>
            <el-button type="primary" plain @click="refresh">全部 ({{ state.total }})</el-button>
            <el-button type="primary" plain @click="unpay">待付款({{ state.statistics.unpay }})</el-button>
            <el-button type="primary" plain @click="instock">备货中({{ state.statistics.dealing }})</el-button>
            <el-button type="primary" plain @click="delivery">配送中({{ state.statistics.in_delivery }})</el-button>
            <el-button type="primary" plain @click="finished">已完成({{ state.statistics.finished }})</el-button>
            <el-button type="primary" plain @click="cancel">已取消({{ state.statistics.cancel }})</el-button>
          </el-button-group>
        </div>
        <el-button-group>
          <el-button type="warning" @click="refresh">刷新</el-button>
        </el-button-group>
      </div>
    </template>

    <el-table
      class="table-row-optimize"
      v-loading="state.loading"
      ref="multipleTable"
      :data="state.tableData"
      tooltip-effect="dark">

      <el-table-column type="expand" class="expanded-table-optimize">
        <template #default="props">
          <el-table :data="props.row.goods">
            <el-table-column label="#ID" prop="good_id" width="50"/>
            <el-table-column align="center" width="110">
              <template #default="scope">
                <div class="order-good-cover-mask">
                  <img class="order-good-cover" :src="scope.row.content.master">
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品信息" prop="content.title"/>
            <el-table-column label="售价" prop="content.price" width="100">
              <template #default="scope">
                <span class="fee" v-if="scope.row.number === 1">
                  ￥{{ scope.row.content.price }} / {{ scope.row.content.units }}
                </span>
                <span class="fee" v-else>
                  ￥{{ scope.row.content.price }}  / {{ scope.row.content.units }} × {{ scope.row.number }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="门店信息" align="center" style="display: flex;">
              <template #default="scope">
                <div style="display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;">
                  <div class="shop-logo">
                    <img :src="scope.row.shop.shoplogo" :alt="scope.row.shop.shopname"
                      :style="{ width: '48px', height: '48px' }">
                  </div>
                  <div class="right" style="margin-left: 10px;">
                    <div>{{ scope.row.shop.shopname }}</div>
                    <span style="font-size: 10px; color: #bdbdbd;">{{ scope.row.shop.address }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column prop="orderno" label="订单号"/>
      <el-table-column prop="fee" label="支付金额" width="140">
        <template #default="scope">
          <span class="fee"><strong>￥</strong>{{ scope.row.fee }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付状态" align="center" width="100">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.paied === 1">已付款</el-tag>
          <el-tag type="danger" v-else-if="scope.row.paied === 2">已取消</el-tag>
          <el-tag v-else>待付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0">待付款</el-tag>
          <el-tag v-if="scope.row.status === 100" color="#d9f4ff" style="color:#00bcd4;">备货中</el-tag>
          <el-tag v-if="scope.row.status === 200" type="warning">配送中</el-tag>
          <el-tag v-if="scope.row.status === 300" type="success">已完成</el-tag>
          <el-tag v-if="scope.row.status === 400" type="danger">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pay_time" label="支付时间"/>
      <el-table-column label="收货人信息">
        <template #default="scope">
          <div>{{ scope.row.uname }} 　<span class="address">{{ scope.row.phone }}</span></div>
          <span class="address">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next, jumper, total"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { AdminOrderList } from "../api/server/order";

const state = reactive({
  loading: true,
  tableData: null,
  total: 0,
  statistics: { unpay: 0, dealing: 0, in_delivery: 0, finished: 0 }
})
const params = reactive({ page: 1, limit: 10, orderno: '' })

onMounted(() => {
  getList()
})

const getList = async (page) => {
  page && (params.page = page)
  state.loading = true
  console.info(params)
  const { data: { statistics, items: { data, total, current_page } } } = await AdminOrderList(params)
  state.tableData = data
  state.total = total
  params.page = current_page
  statistics.map(item => Reflect.set(state.statistics, item.title, item.number))
  state.loading = false;
}

const query = () => getList()
const unpay = () => {
  params.status = 0
  getList()
}
const instock = () => (params.status = 100) && getList()
const delivery = () => (params.status = 200) && getList()
const finished = () => (params.status = 300) && getList()
const cancel = () => (params.status = 400) && getList()
const refresh = () => delete params.status && getList()
const changePage = page => getList(page)

</script>

<style scoped>

.order-good-cover-mask {
  display: inline-block;
  width: 100px;
  height: 60px;
  border-radius: 5px;
  overflow: hidden;
}

.order-good-cover {
  width: 100%;
}

span.fee {
  color: #ff4d51;
}

span.fee strong {
  font-size: 16px;
}

span.address {
  color: rgb(189 189 189);
}

/** 设置表格行高 */
.table-row-optimize :deep(.el-table__body .el-table__row) {
  height: 72px;
}

</style>
